Ana içeriğe geç

Bootstrap Nedir?

Bootstrap, Twitter tarafından geliştirilen ve dünya çapında en popüler CSS framework'üdür. Responsive tasarım, hazır bileşenler ve kapsamlı belgelendirme sunar.

<!-- Bootstrap Temel Yapı -->
<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Logo</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
              data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
    </div>
  </nav>

  <div class="container mt-4">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">Başlık</h5>
            <p class="card-text">İçerik metni...</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
ipucu

Bootstrap'i projenize eklemek için CDN kullanabilir veya npm install bootstrap komutu ile kurabilirsiniz.

Temel Özellikler​

  • Responsive grid sistemi
  • Kapsamlı UI bileşenleri
  • JavaScript eklentileri
  • Özelleştirilebilir SASS/SCSS
  • Mobil öncelikli tasarım
  • Geniş tarayıcı desteği

Önemli Nokta: Bootstrap'in grid sistemi, 12 kolonlu yapısıyla esnek ve responsive tasarımlar oluşturmayı kolaylaştırır. — Bootstrap Dokümantasyonu

Grid Sistemi​

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Responsive kolon -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Responsive kolon -->
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Responsive kolon -->
    </div>
  </div>
</div>

Temel Bileşenler​

  1. Navigasyon

    • Navbar
    • Breadcrumb
    • Pagination
    • Tabs

  2. Form Elemanları

    • Input grupları
    • Select
    • Checkbox/Radio
    • Validation
bilgi

Bootstrap 5 ile birlikte jQuery bağımlılığı kaldırılmış ve vanilla JavaScript kullanılmaya başlanmıştır.

Özelleştirme​

// SCSS ile özelleştirme
$theme-colors: (
  "primary":    #0d6efd,
  "secondary":  #6c757d,
  "success":    #198754,
  "info":       #0dcaf0,
  "warning":    #ffc107,
  "danger":     #dc3545,
  "light":      #f8f9fa,
  "dark":       #212529
);

@import "bootstrap/scss/bootstrap";
tehlike

Özelleştirmeler yaparken Bootstrap'in responsive özelliklerini bozmamaya dikkat edin.

Responsive Utilityler​

  1. Display Sınıfları
<div class="d-none d-md-block">
  <!-- Sadece medium ve üzeri ekranlarda görünür -->
</div>
  1. Spacing Utilityler
<div class="mt-3 mb-4 p-2">
  <!-- margin-top: 1rem, margin-bottom: 1.5rem, padding: 0.5rem -->
</div>

JavaScript Bileşenleri​

// Modal örneği
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
});

// Tooltip aktivasyonu
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl);
});

En İyi Uygulamalar​

  1. Performans Optimizasyonu

    • Gerekli bileşenleri seçerek import etme
    • CSS/JS minifikasyonu
    • Lazy loading

  2. Responsive Tasarım

    • Mobile-first yaklaşım
    • Breakpoint kullanımı
    • Responsive görüntüler

  3. Özelleştirme

    • SCSS değişkenlerini kullanma
    • Utility sınıfları oluşturma
    • Component override
bilgi

Bootstrap'in dokümantasyonu, kapsamlı örnekler ve en iyi uygulamalar içerir.

Bootstrap vs Alternatifler​

  • Tailwind CSS ile karşılaştırıldığında daha hazır bileşen odaklı
  • Foundation ile karşılaştırıldığında daha geniş topluluk
  • Bulma ile karşılaştırıldığında daha fazla JavaScript desteği

Özetle, Bootstrap, web geliştirme sürecini hızlandıran, responsive tasarımı kolaylaştıran ve zengin bileşen kütüphanesi sunan olgun bir framework'tür. Özellikle hızlı prototipleme ve orta ölçekli projeler için ideal bir seçenektir. Geniş topluluk desteği ve kapsamlı dokümantasyonu ile öğrenmesi ve kullanması kolay bir çözüm sunar.